<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
/*无后端前端书写静态数据*/
import { ref, onMounted,watch} from 'vue';
import { useRoute } from 'vue-router';
import { SecCategory } from '@/apis/category';

const route = useRoute();
const categoryId =ref(route.params.id); // 将categoryId设置为响应式变量 
const categorysubtitle = ref([]);

const getSecCategory=async()=>{
    const res=await SecCategory(categoryId.value);
    categorysubtitle.value=res.data
}
onMounted(() => {getSecCategory();});

// 监听categoryId的变化，当路由参数变化时重新请求数据
watch(() => route.params.id, (newCategoryId) => {
  categoryId.value = newCategoryId; // 更新categoryId
  getSecCategory(); // 重新获取数据
});
</script>

<template>
<div class="container">
<div class="sub-list">
    <h2>全部分类</h2>
    <ul>
        <li v-for="i in categorysubtitle.secCategory" :key="i.id">
            <RouterLink :to="`/categorysub/${i.id}`">
                <div class="category-box"> <!-- 使用一个 div 来包裹文字 -->
                    <p>{{ i.name }}</p>
                </div>
            </RouterLink>
        </li>
    </ul>
 </div>
</div>

</template>

<style lang="scss" scoped>
.container{
    height:500px;
    margin-top: 20px;
    margin-bottom: 20px;
    
}
.sub-list{
    margin-top:20px;
  
    display: flex;
    flex-direction: column; /* 设置为竖直排列 */
    align-items: center;

    h2{
        margin-top: 20px;
    }


    ul{
        margin-top: 30px;
        display:flex ;
        padding:0 30px;
        flex-wrap:wrap;
        gap:20px;
    }
    li{
        width:160px;
        height:300px;
    }
    a{
        text-align: center;
        display:block;
        font-size:16px;
    }
    .category-box {
    display: flex; /* 设置为弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;
   
    border: 1px solid #ccc; /* 边框样式 */
    height: 200px;
    background-color: #f9f9f9; /* 背景颜色 */
    transition: background-color 0.3s; /* 动画效果 */
}

   .category-box:hover {
    background-color: #eaeaea; /* 悬停时改变背景颜色 */
}
    p{
        font-size: 18px;
    }
  
}


</style>